<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>1.引出组件的生命周期</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        /* 此处一定要写babel */
			//1.创建组件
			class Life extends React.Component {
				state = {
					opacity: 1,
				}
				//开始变化
				// action=()=>{
				//     setInterval(() => {
				//          //获取原始状态
				//     let { opacity } = this.state
				//       //减少0.1
				// 		opacity -= 0.1
				// 		if (opacity < 0) {
				// 			opacity = 1
				// 		}
				//         //设置新的透明度
				// 		this.setState({
				// 			opacity,
				// 		})
				// 	}, 200)
				// }
				//生命周期===组件挂载完毕
				componentDidMount() {
					console.log('组件挂载')
					this.timer = setInterval(() => {
						//获取原始状态
						let { opacity } = this.state
						//减少0.1
						opacity -= 0.1
						if (opacity < 0) {
							opacity = 1
						}
						//设置新的透明度
						this.setState({
							opacity,
						})
					}, 200)
				}
				death = () => {
					// //清除定时器
					// clearInterval(this.timer)
					//卸载组件
					ReactDOM.unmountComponentAtNode(
						document.getElementById('test')
					)
				}
                //组件将要被卸载 
                componentWillUnmount(){
                    //清除定时器
					clearInterval(this.timer)
                }
				//初始化渲染 和状态更新之后
				render() {
					console.log('first')
					// let { opacity } = this.state
					// setInterval(() => {
					// 	opacity -= 0.1
					// 	if (opacity < 0) {
					// 		opacity = 1
					// 	}
					// 	this.setState({
					// 		opacity,
					// 	})
					// }, 200)
					return (
						<div>
							<h1 style={{ opacity: this.state.opacity }}>
								react学不会怎么办?
							</h1>
							<button onClick={this.death}>不活了</button>
							<button onClick={this.action}>开始变化</button>
						</div>
					)
				}
			}
			//2.渲染虚拟DOM到页面
			ReactDOM.render(<Life />, document.getElementById('test'))
		</script>
</body>

</html>